<template>
    <el-dialog
        title="条件字段"
        v-model="visibleDialog"
        width="50%"
        top="-10vh"
        @open="openDialog"
        @close="closeDialog"
    >
        <el-divider content-position="left">申请单</el-divider>
        <el-checkbox
            v-model="orderListAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChangeOrder"
            >全选
        </el-checkbox>
        <el-checkbox-group v-model="orderListCheck">
            <el-row>
                <el-col :span="6" v-for="item in orderList" :key="item">
                    <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
                </el-col>
            </el-row>
        </el-checkbox-group>

        <el-divider content-position="left">付款单</el-divider>

        <el-checkbox
            v-model="payListAll"
            :indeterminate="isIndeterminatePay"
            @change="handleCheckAllChangePay"
            >全选
        </el-checkbox>
        <el-checkbox-group v-model="payListCheck">
            <el-row>
                <el-col :span="6" v-for="item in payList" :key="item">
                    <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
                </el-col>
            </el-row>
        </el-checkbox-group>

        <template #footer>
            <el-button @click="visibleDialog = false">取 消</el-button>
            <el-button type="primary" @click="sureDialog">确 定</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { computed, ref } from 'vue'
import { dictDataLists } from '@/api/financial/lists'
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    },
    visible: {
        type: Boolean,
        default: false
    }
})
const emits = defineEmits(['update:visible', 'setValue'])

const visibleDialog = computed({
    get() {
        return props.visible
    },
    set(val) {
        emits('update:visible', val)
    }
})

const openDialog = async () => {
    const order = await dictDataLists({ page_no: 1, page_size: 100, type_id: 49 })
    const pay = await dictDataLists({ page_no: 1, page_size: 100, type_id: 50 })
    orderList.value = order.lists
        .filter((x) => x.status)
        .map((y) => {
            return {
                id: y.id,
                name: y.name,
                value: y.value
            }
        })
    payList.value = pay.lists
        .filter((x) => x.status)
        .map((y) => {
            return {
                id: y.id,
                name: y.name,
                value: y.value
            }
        })
    props.list.dg_finance_order.forEach((x) => {
        orderListCheck.value.push(x.id)
    })
    props.list.bills_of_payment.forEach((x) => {
        payListCheck.value.push(x.id)
    })
}
const sureDialog = () => {
    const order = []
    orderListCheck.value.forEach((x) => {
        const item = orderList.value.find((y) => y.id === x)
        order.push(item)
    })
    const pay = []
    payListCheck.value.forEach((x) => {
        const item = payList.value.find((y) => y.id === x)
        pay.push(item)
    })
    emits('setValue', { order, pay })
    visibleDialog.value = false
}

const orderList = ref([])
const orderListCheck = ref([])
const orderListAll = computed(() => {
    return orderListCheck.value.length > 0 && orderListCheck.value.length === orderList.value.length
})
const isIndeterminate = computed(() => {
    return orderListCheck.value.length > 0 && orderListCheck.value.length < orderList.value.length
})

const handleCheckAllChangeOrder = (val) => {
    orderListCheck.value = val ? orderList.value.map((x) => x.id) : []
}

const payList = ref([])
const payListCheck = ref([])
const payListAll = computed(() => {
    return payListCheck.value.length > 0 && payListCheck.value.length === payList.value.length
})
const isIndeterminatePay = computed(() => {
    return payListCheck.value.length > 0 && payListCheck.value.length < payList.value.length
})

const handleCheckAllChangePay = (val) => {
    payListCheck.value = val ? payList.value.map((x) => x.id) : []
}

const closeDialog = () => {
    orderListCheck.value = []
    payListCheck.value = []
}
</script>

<style scoped lang="scss"></style>
